<!--
 * @Author: 陈迪秀 1170776994@qq.com
 * @Date: 2024-02-23 16:31:22
 * @LastEditors: qf
 * @LastEditTime: 2024-04-22 13:43:49
 * @FilePath: \vite-project\src\components\contact-us\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="contact-us" :style="style">
    <div class="contact-us__view">
      <h1>联系我们 获取高效服务</h1>
      <!-- 验证 -->
      <!-- :rules="rules" -->
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="0px"
        class="demo-ruleForm from__view"
        status-icon
      >
        <el-form-item label="" prop="company">
          <el-input
            v-model="ruleForm.company"
            placeholder="请输入您的公司名称"
          />
        </el-form-item>
        <el-form-item label="" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入您的姓名" />
        </el-form-item>
        <el-form-item label="" prop="mobile">
          <el-input v-model="ruleForm.mobile" placeholder="请输入您的手机号" />
        </el-form-item>
        <el-form-item>
          <el-button @click="submitForm(ruleFormRef)">提交需求</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <service-telephone-dialog v-model="show1" @close="show1 = !show1" />
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from "vue";
import { imgUrl } from "@/utils/common";
import type { FormInstance, FormRules } from "element-plus";
import ServiceTelephoneDialog from "@/components/service-telephone-dialog/index.vue";
import { sendContactWorkOrder } from "@/api/home/index";
import { checkPhone } from "@/utils/ruleMobile";
import { useRoute } from "vue-router";

const route = useRoute();
const show1 = ref(false);
const ruleFormRef = ref<FormInstance>();

interface RuleForm {
  company: string;
  name: string;
  mobile: any;
}
let ruleForm = reactive<RuleForm>({
  company: "",
  name: "",
  mobile: "",
});
const style = ref({
  background: `url("${imgUrl}contact-us-bg.png")`,
});
const rules = reactive<FormRules<RuleForm>>({
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  mobile: [
    { required: true, message: "手机号不能为空", trigger: "blur" },
    { min: 11, message: "请输入正确的手机号", trigger: "blur" },
    { validator: checkPhone, trigger: "blur" },
  ],
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      ruleForm.company = "";
      ruleForm.name = "";
      ruleForm.mobile = "";
      _sendContactWorkOrder();
      show1.value = true;
    } else {
      console.log("error submit!", fields);
    }
  });
};
const _sendContactWorkOrder = async () => {
  try {
    const res = await sendContactWorkOrder({
      ...ruleForm,
      // tos: [],
    });
    if (res?.code === "200") {
      console.log("成功");
      ruleForm.company = "";
      ruleForm.name = "";
      ruleForm.mobile = "";
      show1.value = true;
    }
  } catch (err) {
    console.log(err);
  }
};

/* 清除联系我们表单校验 */
watch(
  () => route,
  () => {
    ruleFormRef.value.resetFields();
  },
  {
    deep: true,
  }
);
</script>
<style scoped lang="scss">
.contact-us {
  min-width: 1280px;
  height: 302px;
  background-repeat: no-repeat; /* 取消平铺 */
  background-position: center; /* 居中对齐 */
  background-size: cover; /* 自适应并覆盖整个容器 */
  display: flex;
  align-items: center;
  justify-content: center;
  .contact-us__view {
    width: 1280px;
    margin: 0 auto;
    text-align: center;

    h1 {
      color: #fff;
      font-size: 48px;
      margin-bottom: 60px;
      font-family: "PingFang SC, PingFang SC";
    }
    .from__view {
      display: flex;
      justify-content: center;
    }
  }
}
:deep(.el-input__wrapper) {
  height: 48px !important;
  width: 260px !important;
  margin-right: 24px;
  font-size: 16px;
}
:deep(.el-button) {
  height: 48px !important;
  width: 106px !important;
  font-size: 18px;
}
</style>
